<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>家庭记账管理系统</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
     <style type="text/css">
     	
body {
    background: #f5f6f7;
    overflow-x: hidden;
    overflow-y: hidden;
}

.left-menu, .btns, .toolbar-li {
    list-style: none;
    float: left
}

.newsfix {
    width: 100px; /*margin-top: 50px;*/
    float: left;
    background-color: white
}

.newsframe {
    float: left;
    margin-left: 20px;
    margin-top: 50px;
    width: 89%
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    background-color: #f44444;
}

#nav li a:hover{
    background-color: #f44444;
    color: #fff;
}
.clearfix {
    clear: both;
}

.bafs-toolbar {
    /*background-color: red;*/
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);
    height: 50px;
    line-height: 50px;
}

.container {
    /*background-color:green ;*/
}

.right-login {
    float: right;
}

.right-login .login {
    color: #999;
}

/*.toolbar-li{
    background-color: pink;
}*/
.left-menu {
    padding-left: 0;

}

.left-menu a {
    margin-left: -12px;
}

.login:hover {
    color: #3F3F3F;
    text-decoration: none;
}

/*左侧菜单栏*/
.container li a {
    color: #707070;
    text-align: center;

}
.newsfix{
    margin-left: 0;
    padding-left:0;
}
/*右侧iframe*/
.newsframe {
    width: 600px;
    height: 600px;
    background: #fff;
    display: block;
    position: absolute;
    top: 1.5%;
    left: 16%;
    right: 0;
}
     </style>
</head>
<body>
<div class="bafs-toolbar">
    <div class="container row center-block">
        <ul class="left-menu">
            <li class="toolbar-li">
                <a href="#" title="记账系统首页" target="_blank">
                    <img src="/gradesign/logo/logov2.png" height="40px" width="250px"/>
                </a>
            </li>
        </ul>

        <div class="right-login">
            <ul>
                <li class="toolbar-li">
                    <a href="/gradesign/login" class="login">登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="clearfix"></div>
<div class="container">
    <div class="newsfix">
        <ul id="nav" class="nav nav-pills nav-stacked">
            <li class="active">
                <a href="/gradesign/welcome/news?mark=home" target="newsContent">首页</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=21jingji" target="newsContent">21经济</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=ceweekly" target="newsContent">人民日报中国经济周刊</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=eeo" target="newsContent">经济观察网</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=finance" target="newsContent">财经中心——中国网</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=qq" target="newsContent">腾讯</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=nbd" target="newsContent">nbd</a>
            </li>
            <li>
                <a href="/gradesign/welcome/news?mark=xinlicai" target="newsContent">新理财</a>
            </li>
        </ul>
    </div>
    <div class="newsframe" onMouseOut="hideS()" onMouseOver="showS()" style="  width: 80%;  height: 100%;">
        <iframe name="newsContent" id="newsContent" style="width:100%;height:800px;border:none;" frameborder="false"
                 allowtransparency="true" src="/gradesign/welcome/news?mark=home"></iframe>
    </div>
</div>
</body>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
   /* onload = function () {
        function removeActiveClass(node) {
            node.className = "";
        }

        document.querySelector('ul[id=nav]').onclick = function (e) {
            Array.prototype.forEach.call(document.querySelectorAll('ul[id=nav]>li'), removeActiveClass);
            var target = e.target;
            target.className = "li-active";
        }
    }*/
</script>
<script src="/gradesign/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	
	function showS()
	{
	    document.getElementById("newsContent").scrolling="yes";
	    document.getElementById("newsContent").style.overflow="scroll";
	    //alert(document.getElementById("newsContent").scrolling);
	}
	function hideS()
	{
	    document.getElementById("newsContent").scrolling="no";
	    document.getElementById("newsContent").style.overflow="hidden";
	    //alert(document.getElementById("newsContent").style.overflow);
	}
	
	var iframe = document.getElementById("newsContent");
	/* iframe.height=document.documentElement.clientHeight;
	//以下判断iframe是否加载完,并且隐藏滚动条
	if (iframe.attachEvent){
	    iframe.attachEvent("onload", function(){
	        //hideS();
	        //document.getElementById("loading").style.display="none";
	    });
	} else {
	    iframe.onload = function(){
	        //  hideS();
	        //document.getElementById("loading").style.display="none";
	    };
	} */
	/*$('.btn').on('click',function() {
	    $(this).addClass('on').siblings().removeClass('on');
	})*/
	//点击左侧菜单栏按钮变色
	$("#nav li").on('click', function () {
	    //alert("!!!");
	    $(this).addClass('active').siblings().removeClass('active');
	})
</script>
</html>